<template>
  <view>
    <view class="search_box_cont">
      <view class="search_box"  @click="searchBoxHandler">
        <uni-icons type="search" size="17"></uni-icons>
        <text class="placeholder">搜索</text>
      </view>
    </view>
    <view class="cate_con">
      <scroll-view class="leftPart" scroll-y="true" :style="'height:'+heig+'px'" 	lower-threshold 	:scroll-top="scrollTop">
        <block v-for="(item,index) in scrollList" :key="index">
          <view :class="['activesmall',index === active? 'backactive':'']" @click="activeLeft(index)">{{item.cat_name}}</view>
        </block>
      </scroll-view>
      <scroll-view scroll-y="true" class="rightPart" :style="'height:'+heig+'px'" scroll-with-animation="true" :scroll-top="scrollTopright">
        <view class="" v-for="(item,i) in scollRightList" :key="i">
          <view class="secTitle">/{{item.cat_name}}/</view>
          <view class="secCon">
            <view class="secConLi" v-for="(items,index) in item.children" :key="index" @click="threeTo(items)">
              <img :src="items.cat_icon" alt="" srcset="">
              <view>{{items.cat_name}}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    
  </view>
</template>

<script>
  export default {
    data() {
      return {
        heig:0, //左边栏高度
        scrollList:[],
        active:0,
        scollRightList:[],
        scrollTop:0,
        scrollTopright:0
      };
    },
    methods: {
      async getscrollList() {
        const {data:res} = await uni.$http.get('/api/public/v1/categories')
        // console.log(res);
        if(res.meta.status !== 200){return uni.$showMsg()}
        this.scrollList = res.message
        this.scollRightList = res.message[0].children
      },
      // 搜索框点击事件
      searchBoxHandler(){
        uni.navigateTo({
          url:'/subpkg/search/search'
        })
      },
      activeLeft(index){
        this.active = index
        this.scollRightList = this.scrollList[index].children
        this.scrollTopright = this.scrollTopright === 0 ? 1 : 0 //设置竖向滚动条位置,只有两种状态1和0
      },
      // 距底部多远时
      scrolltolower(){
      },
      threeTo(items){
        uni.navigateTo({
        })
      }
    },
    onLoad() {
      this.getscrollList()
       // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      this.heig = sysInfo.windowHeight
    }
  }
</script>

<style lang="scss">
  .cate_con{
    display: flex;
  }
.leftPart{
  width: 200rpx;
  text-align: center;
  .scroll-view-item{
    height: 120rpx;
    line-height: 120rpx;
  }
}
.activesmall{
  height: 120rpx;
  line-height: 120rpx;
}
.backactive{
  background-color: #fff;
  position: relative;
  &::before{
    content: ' ';
    display: block;
    width: 6rpx;
    height: 70rpx;
    background-color: #c00000;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0,-50%);
  }
}
.rightPart{
  background-color: #fff;
}
.secTitle{
  text-align: center;
  padding: 30rpx 0;
}
.secCon{
  display: flex;
  flex-wrap: wrap;
  .secConLi{
    width: 33.3%;
    height: 180rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20rpx;
    img{
      width: 120rpx;
    }
  }
}
</style>
